<template>
  <div class="product-image-container">
    <div class="container">
      <div class="card-box" v-for="(item,i) in imgList" :key="i">
        <el-image :preview-src-list="srcList" :src="item.url" style="height: 300px;width: 300px"></el-image>
        <el-button type="danger">删 除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductImage } from "../../api/admin/productImage";
export default {
  data() {
    return {
      imgList: [],
      srcList: []
    }
  },
  methods: {
    async init() {
      let id = this.$store.state.id
      let name = this.$store.state.name
      let res = await getProductImage(id)
      console.log(res.data,id,name);
      this.imgList = res.data.data
      res.data.data.forEach(item => {
        this.srcList.push(item.url)
      });
    }
  },
  created() {
    if(this.$store.state.id) {
      this.init()
    }else {
      this.$router.push('/admin/personalWork')
    }
  }
}
</script>

<style scoped>
  .container{
    display: flex;
    flex-wrap: wrap;
  }
  .card-box{
    width: 300px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    background: rgba(198, 195, 195, 0.6);
    border-radius: 5px;
  }
</style>